<!--
 * @Description: 该页面功能已经废弃，此页面内容仅做留存以备查询。-- Taoist
-->
<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="title">
				系统常用语（7）
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in changyongyu.system" :key="index" @click="xuanze(item.id,item.content)">
					<view class="left">
						{{item.content}}
					</view>
					<view class="right">
						<image v-if="xuanzhongNum==item.id" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
						<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="zidingyi-title">
				自定义常用语
			</view>
			<view class="zidingyi-list">
				<view class="zidingyi-item" v-for="(item,index) in changyongyu.custom" :key="index" @click="xuanze(item.id,item.content)">
					<view class="left">
						{{item.content}}
					</view>
					<view class="right">
						<image v-if="xuanzhongNum==item.id" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image>
						<image v-else src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/weixuanzhong.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="fasong()">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '快捷回复',
				
				xuanzhongNum:0,
				
				changyongyu:"",
				content:""///常用语内容
			}
		},
		onLoad() {
			that=this
			that.postData()
		},
		methods: {
			xuanze(num,content){
				that.xuanzhongNum=num
				that.content=content
			},
			postData(){
				that.$postAjax1('Doctorsside_service_settings','',function(data){  //https://ask.suoweilai.com/Doctorsside_service_settings  医生端个人中心 - 个人中心-常用语列表
					// console.log(data.data.data,99999999999)
					that.changyongyu=data.data.data.commonwords
				})
			},
			fasong(){  //发送方法
				console.log(that.content)  //常用语内容
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	padding: 0 32rpx 218rpx;
	.title{
		font-size: 28rpx;
		font-weight: 500;
		color: #343434;
		line-height: 40rpx;
		padding: 32rpx 0  28rpx;
	}
	.list{
		padding-left: 26rpx;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			.left{
				font-size: 30rpx;
				font-weight: 400;
				color: #171818;
				line-height: 42rpx;
				width: 600rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.right{
				image{
					display: block;
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
	.zidingyi-title{
		padding: 6rpx 0 32rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #343434;
		line-height: 40rpx;
	}
	.zidingyi-list{
		padding-left: 26rpx;
		.zidingyi-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			.left{
				font-size: 30rpx;
				font-weight: 400;
				color: #171818;
				line-height: 42rpx;
				
				width: 600rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.right{
				image{
					display: block;
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
}
.btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 32rpx 100rpx;
	.btn{
		width: 100%;
		height: 98rpx;
		background: linear-gradient(219deg, #FF9331 0%, #FE7600 100%);
		border-radius: 8rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
	}
}
</style>


